<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=no"/>
  <title>主页</title>

  <script src="js/vue.js"></script>
  <script src="js/axios-0.18.0.js"></script>
  <script src="element-ui/lib/index.js"></script>
  <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

  <style>
      .el-header {
          background-color: #303133;
          color: #333;
          line-height: 80px;
          height: 100px;
      }

      .el-aside {
          color: #333;
      }

      .box_bgd {
          float: left;
          /*display: flex;*/
          /*align-items: center;*/
          justify-content: center;
          cursor: pointer;
      }

      .box_bgd i {
          font-size: 20px;
      }

      .el-menu-vertical:not(.el-menu--collapse) {
          width: 100%;
      }

      h1 {
          margin-left: 40px;
          color: white;
          float: left;
          line-height: 40px;
      }

      .el-avatar {
          vertical-align: middle;
      }

      .el-dropdown-link {
          cursor: pointer;
          color: #409EFF;
      }

      .el-icon-arrow-down {
          font-size: 16px;
      }

      .logout:hover {
          cursor: pointer;
      }

  </style>
</head>
<body>

<div id="app">
  <el-container style="height: 100%; border: 1px solid #eee">
    <el-header style="text-align: right; font-size: 16px; height: 80px">
      <h1>商城平台</h1>
      <a style="float: right;color: white;font-size: 15px;margin-right: 30px" @click="handleLogout()"
         class="logout">退出</a>
    </el-header>

    <el-container style="height: 870px;width: auto">
      <el-aside width="12%" style="background-color: rgb(238, 241, 246)">
        <el-menu class="el-menu-vertical" default-active="1">
          <el-menu-item index="1" @click="changePage(1)">
            <i class="el-icon-goods"></i>
            <span slot="title">商品管理</span>
          </el-menu-item>
          <el-menu-item index="2" @click="changePage(2)">
            <i class="el-icon-user"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-menu-item index="3" @click="changePage(3)">
            <i class="el-icon-s-order"></i>
            <span slot="title">订单管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <el-main style="width: auto">
          <iframe :src="nowUrl" style="height:100%;width:100%;background-color:#fff;border: none">
          </iframe>
        </el-main>
        <el-footer style="height: 40px;line-height: 40px;text-align: center">庄朔 &copy; 2023</el-footer>
      </el-container>


    </el-container>
  </el-container>
</div>
<script src="/backend/plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="/backend/plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="/backend/plugins/axios/axios.min.js"></script>
<script src="/backend/js/request.js"></script>
<script src="/backend/api/login.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                nowUrl: '/backend/pages/goods/list.html',
                username: '',
                adminInfo: '',
                circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            async init() {
                this.adminInfo = window.localStorage.getItem("adminInfo")
                if (this.adminInfo == null) {
                    window.location.href = '/backend/pages/login.html'
                }
            },
            async handleLogout() {
                let res = await loginoutApi({})
                if (String(res.code) === '1') { //1表示退出成功
                    window.localStorage.removeItem('adminInfo')
                    window.location.href = '/backend/pages/login.html'//跳转
                } else {
                    this.$message.error(res.msg)
                }
            },
            async changePage(page) {
                if (page === 1)
                    this.nowUrl = '/backend/pages/goods/list.html'
                else if (page === 2)
                    this.nowUrl = '/backend/pages/user/list.html'
                else if (page === 3)
                    this.nowUrl = '/backend/pages/orders/list.html'
            }
        }

    })

</script>


</body>
</html>